import { useEffect, useRef, useState } from "react";
import styles from './index.less';
import { Button, Flex, message } from 'antd';
import ReactJson from 'react-json-view';

import Lottie from "lottie-react";
import groovyWalkAnimation from "@/assets/anims/groovyWalk.json";
import hamster from "@/assets/anims/hamster.json";
import likeButton from "@/assets/anims/likeButton.json";
import switchAnimation from '@/assets/anims/switch.json';
import robotAnimation from "@/assets/anims/robotAnimation.json";

export default () => {
    const lottieRef = useRef<any>(null);
    const switchRef = useRef<any>(null);

    const [direction, setDirection] = useState<-1 | 1>(1);

    const [speed, setSpeed] = useState<number>(1);

    const [subFrame, setSubFrame] = useState<boolean>(true);

    const [switchOn, setSwitchOn] = useState<boolean>(false);

    useEffect(() => {
        
    }, []);

    return (
        <div className={styles.container}>
            <a href="https://lottiereact.com/" target='_blank'>官网：https://lottiereact.com/</a>
            <br/>
            <a href="https://github.com/Gamote/lottie-react">仓库：https://github.com/Gamote/lottie-react</a>

            <h1>动画的展示与控制</h1>
            <Lottie
                lottieRef={lottieRef}
                style={{ width: 500, height: 500 }}
                animationData={groovyWalkAnimation}
                loop={true}
                autoPlay={true}
                onComplete={(e) => {
                    console.log(`## onComplete e=${JSON.stringify(e)}`);
                }}
                onLoopComplete={(e: any) => {
                    const {
                        type,// 事件类型，这里是loopComplete
                        currentLoop,// 当前循环次数，1、2、3、4、5
                        totalLoops,// 总循环次数，如果loop设置true，这里就是true，如果loop设置数值，这里就是数值
                        direction,// 方向
                    } = e;
                }}
                onEnterFrame={() => {
                    // 每开始一帧都走一次，千万不要在这打印日志！！！
                }}
                onSegmentStart={() => {
                    console.log(`## onSegmentStart ...`);
                }}
                onConfigReady={() => {
                    console.log(`## onConfigReady ...`);
                }}
                onDataReady={() => {
                    console.log(`## onDataReady ...`);
                }}
                onDataFailed={() => {
                    console.log(`## onDataFailed ...`);
                }}
                onLoad={() => {
                    console.log(`## onLoad ...`);
                }}
                onLoadStart={() => {
                    console.log(`## onLoadStart ...`);
                }}
                onLoadCapture={() => {
                    console.log(`## onLoadCapture ...`);
                }}
                onLoadStartCapture={() => {
                    console.log(`## onLoadStartCapture ...`);
                }}
                onLoadedData={() => {
                    console.log(`## onLoadedData ...`);
                }}
                onLoadedDataCapture={() => {
                    console.log(`## onLoadedDataCapture ...`);
                }}
                onLoadedImages={() => {
                    console.log(`## onLoadedImages ...`);
                }}
                onLoadedMetadata={() => {
                    console.log(`## onLoadedMetadata ...`);
                }}
                onLoadedMetadataCapture={() => {
                    console.log(`## onLoadedMetadataCapture ...`);
                }}
                onDOMLoaded={() => {
                    console.log(`## onDOMLoaded ...`);
                }}
                onDestroy={() => {
                    console.log(`## onDestroy ...`);
                }}
            />

            <Flex gap="small" wrap align="center">
                <Button type="primary" size='small' onClick={() => {
                    lottieRef.current?.play();
                }}>播放</Button>
                <Button type="primary" size='small' onClick={() => {
                    lottieRef.current?.pause();
                }}>暂停</Button>
                <Button type="primary" size='small' onClick={() => {
                    lottieRef.current?.stop();
                }}>停止</Button>
                <Button type="primary" size='small' onClick={() => {
                    const newSpeed = speed === 0 ? 0 : speed - 0.1;
                    lottieRef.current?.setSpeed(newSpeed);
                    setSpeed(newSpeed);
                }}>减速</Button>
                <span>速度:{speed.toFixed(1)}</span>
                <Button type="primary" size='small' onClick={() => {
                    const newSpeed = speed === 10 ? 10 : speed + 0.1;
                    lottieRef.current?.setSpeed(newSpeed);
                    setSpeed(newSpeed);
                }}>加速</Button>
                <Button type="primary" size='small' onClick={() => {
                    lottieRef.current?.goToAndPlay(15, true);
                }}>跳播</Button>
                <Button type="primary" size='small' onClick={() => {
                    lottieRef.current?.goToAndStop(15, true);
                }}>跳停</Button>
                <Button type="primary" size='small' onClick={() => {
                    const newDirection = direction === 1 ? -1 : 1;
                    lottieRef.current?.setDirection(newDirection);
                    setDirection(newDirection);
                }}>方向({direction === 1 ? '正': '反'})</Button>
                <Button type="primary" size='small' onClick={() => {
                    lottieRef.current?.playSegments([0, 15], false);
                }}>播放片段</Button>
                <Button type="primary" size='small' onClick={() => {
                    const newSubFrame = !subFrame;
                    lottieRef.current?.setSubframe(newSubFrame);
                    setSubFrame(newSubFrame);
                }}>浏览器帧({subFrame ? '开' : '关'})</Button>
                <Button type="primary" size='small' onClick={() => {
                    const duration = lottieRef.current?.getDuration();
                    const frames = lottieRef.current?.getDuration(true);
                    message.info(`时长:${duration}秒, 帧数:${frames}帧`);
                }}>获取时长</Button>
                <Button type="primary" size='small' onClick={() => {
                    lottieRef.current?.destroy();
                }}>销毁</Button>
            </Flex>

            <h1>interactivity配置参数</h1>
            <Lottie
                animationData={robotAnimation}
                style={{ width: 500, height: 500 }}
                interactivity={{
                    mode: "scroll",
                    actions: [
                    {
                        visibility: [0, 0.1],
                        type: "stop",
                        frames: [0],
                    },
                    {
                        visibility: [0.1, 0.5],
                        type: "seek",
                        frames: [0, 45],
                    },
                    {
                        visibility: [0.5, 1.0],
                        type: "loop",
                        frames: [45, 60],
                    },
                    ],
                }}
            />
            <p>interactivity配置参数</p>
            <ReactJson src={JSON.parse('{ "mode": "scroll", "actions": [ { "visibility": [0, 0.2], "type": "stop", "frames": [0] }, { "visibility": [0.2, 0.45], "type": "seek", "frames": [0, 45] }, { "visibility": [0.45, 1.0], "type": "loop", "frames": [45, 60] } ] }')} style={{ marginTop: 20 }} />

            <h1>Switch交互组件</h1>
            <Lottie
                lottieRef={switchRef}
                animationData={switchAnimation}
                style={{ width: 360, height: 180 }}
                loop={0}
                autoPlay={false}
                onClick={() => {
                    if (switchOn) {
                        switchRef.current?.playSegments([80, 140], true);
                        setSwitchOn(false);
                    } else {
                        switchRef.current?.playSegments([0, 60], true);
                        setSwitchOn(true);
                    }
                }}
                onDOMLoaded={() => {
                    switchRef.current?.stop();
                    switchRef.current?.setSpeed(1.5);
                }}
            />
            <Flex gap="small" wrap align="center" style={{ marginTop: 24, marginBottom: 24 }}>
                <Button type="primary" size='small' onClick={() => {
                    if (!switchOn) {
                        switchRef.current?.playSegments([0, 60], true);
                        setSwitchOn(true);
                    }
                }}>开启</Button>
                <Button type="primary" size='small' onClick={() => {
                    if (switchOn) {
                        switchRef.current?.playSegments([80, 140], true);
                        setSwitchOn(false);
                    }
                }}>关闭</Button>
            </Flex>

            <h1>鼠标跟随动画<span style={{ fontSize: 16, fontWeight: 400, color: '#666' }}>（用鼠标从黑框的左侧移动到右侧）</span></h1>
            <Lottie
                animationData={hamster}
                style={{ height: 300,
                    border: 3,
                    borderStyle: "solid",
                    borderRadius: 7,
                }}
                interactivity={{
                    mode: "cursor",
                    actions: [
                        {
                            position: { x: [0, 1], y: [-1, 2] },
                            type: "seek",
                            frames: [0, 179],
                        },
                        {
                            position: { x: -1, y: -1 },
                            type: "stop",
                            frames: [0],
                        },
                    ],
                }}
            />
        </div>
    );
}